<template>
  <el-main>
    <div style="background-color: #fff;padding: 20px;border: 1px solid #ebebeb;height:540px">
      <div style="padding-top: 20px">
        <div style="display: flex">
          <div>
            <el-button type="success" size="medium" @click="getParentFileList()">返回上级目录</el-button>
            <el-button size="medium" plain @click="createFolder">
              <i class="el-icon-document" />
              <span>新建文件夹</span>
            </el-button>
          </div>
          <!--         -->
          <el-upload
            action="http://coisini.cloud/client/resource/upload"
            name="files"
            :headers="headers"
            :data="updateData"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          >
            <el-button type="primary" size="medium" style="margin-left: 10px">上传文件<i
              class="el-icon-upload el-icon--right"
            /></el-button>
          </el-upload>
        </div>

        <el-table
          :data="tableData"
          class="container-table"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column
            prop="name"
            label="文件名"
            sortable
            width="450"
          >
            <template slot-scope="scope">

              <FileIcon v-if="scope.row.type !== 'JPG' && scope.row.type !== 'GIF' && scope.row.type !== 'JPEG' && scope.row.type !== 'PNG'" :data="scope.row"/>

              <img v-if="scope.row.type === 'JPG' || scope.row.type === 'GIF' || scope.row.type === 'JPEG' || scope.row.type === 'PNG'" :src="scope.row.openPath" style="height: 40px;width: 40px"/>

              <a v-if="scope.row.type === 'FOLDER'" class="file-name" @click="getChildrenFile(scope.row.id)">
                {{ scope.row.name }}
              </a>
              <a
                v-else-if="scope.row.type === 'MP4' || scope.row.type === 'FLV' || scope.row.type === 'AVI'"
                class="file-name"
                target="_blank"
                @click="toOpenVideoPlayer(scope.row.openPath)"
              >
                {{ scope.row.fileName }}
              </a>
              <a v-else-if="scope.row.type !== 'MP4'" class="file-name" @click="toList(scope.row.openPath)">
                {{ scope.row.fileName }}
              </a>
            </template>
          </el-table-column>
          <el-table-column
            prop="size"
            label="大小"
            sortable
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.size }} {{ scope.row.sizeType }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <a v-if="scope.row.type !== 'FOLDER'" class="file-name">
                <el-button type="primary" size="small" @click="toDownload(scope.row.id)">下载</el-button>
              </a>
              <a v-if="scope.row.type === 'MP4'" class="file-name">
                <el-button type="success" size="small" @click="toOpenVideoPlayer(scope.row.openPath)">播放</el-button>
              </a>
              <a v-if="scope.row.type !== 'MP4' && scope.row.type !== 'FOLDER'" class="file-name">
                <el-button type="warning" size="small" @click="toList(scope.row.openPath)">预览</el-button>
              </a>
              <a v-if="scope.row.type !== 'FOLDER'" class="file-name">
                <el-button type="info" size="small" @click="toRename(scope.row.id)">修改名字</el-button>
              </a>
              <el-button type="danger" size="small" @click="deleteFile(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <div class="pagecss">
            <el-pagination
              :current-page="queryParam.pageNo"
              :page-sizes="[5]"
              :page-size="queryParam.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <video-player-dialog ref="toVideoPlayer" />
      </div>
    </div>

  </el-main>
</template>
<style>
  .pagecss {
    position: relative;
    top: 30px;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
import FileIcon from '@/components/folder/FileIcon'
import VideoPlayerDialog from './components/VideoPlayerDialog'
import { query, getById, create, getParentFolder, deleteFile, download, upload, rename } from '@/api/file'

export default {
  components: {
    FileIcon,
    VideoPlayerDialog
  },
  data() {
    return {
      total: 0,
      queryParam: {
        pageSize: 5,
        pageNo: 1
      },
      updateData: {
        fileId: 0
      },
      files: [],
      file: {},
      updateFolder: {},
      createFolderName: {},
      folder: {},
      tableData: {}
    }
  },
  computed: {
    // 设置上传的请求头部
    headers: function() {
      const headers = { 'accessToken': '346CC066E2514F8FB971CB67581D2F2B', 'authToken': this.$store.getters.token }
      return headers
    }
  },
  refresh() {
    setTimeout(() => {
      this.queryList()
    }, 1000)
  },
  created() {
    this.queryList()
  },
  methods: {
    toList(url) {
      window.open(url)
    },
    toOpenVideoPlayer(openPath) {
      this.$refs.toVideoPlayer.show(openPath)
    },
    handleSuccess(res) {
      if (+res.returnCode === 200) {
        this.$message({
          type: 'success',
          message: '上传成功!'
        })
        let parentId
        if (this.tableData.length === 0) {
          parentId = this.folder.id
        } else {
          parentId = this.tableData[this.tableData.length - 1].parentId
        }
        this.queryParam.parentId = parentId
        this.queryList(this.queryParam)
      } else {
        this.$message({
          type: 'error',
          message: res.returnMsg
        })
      }
    },
    beforeUpload() {
      /* this.files.push(file.file.raw)

          console.log('---------------file',  this.files)
          let parentId;
          if (this.tableData.length !== 0) {
            parentId = this.tableData[this.tableData.length - 1].parentId
          }else {
            parentId = this.folder.parentId
          }
          this.file.parentId = parentId
          const formData = new FormData();
          formData.append('parentId', parentId);
          formData.append('files', this.files);
          upload(formData)*/
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.queryParam.id = null
      let parentId
      if (this.tableData.length === 0) {
        parentId = this.folder.id
      } else {
        parentId = this.tableData[this.tableData.length - 1].parentId
      }
      this.queryParam.parentId = parentId
      this.query(this.queryParam)
    },
    handleCurrentChange(val) {
      this.queryParam.pageNo = val
      this.queryParam.id = null
      let parentId
      if (this.tableData.length === 0) {
        parentId = this.folder.id
      } else {
        parentId = this.tableData[this.tableData.length - 1].parentId
      }
      this.queryParam.parentId = parentId
      this.query(this.queryParam)
    },
    toDownload(id) {
      // window.location.href = "http://localhost:8080/api/resource/download?id="+id
      window.open('http://coisini.cloud/client/resource/download?id=' + id, '_blank')
    },
    getParentFileList() {
      if (this.tableData.length !== 0) {
        const parentId = this.tableData[this.tableData.length - 1].parentId
        if (parentId === 0) {
          this.$message({
            type: 'success',
            message: '没有上级目录了哦！！！'
          })
          return
        }
      }
      this.queryParam.pageNo = 1
      this.queryParam.parentId = this.folder.parentId
      const id = this.folder.parentId
      if (id !== 0) {
        this.getById(id)
      }
      this.updateData.fileId = id
      getParentFolder(this.queryParam).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    createFolder() {
      let parentId
      if (this.tableData.length === 0) {
        parentId = this.folder.id
      } else {
        parentId = this.tableData[this.tableData.length - 1].parentId
      }

      this.$prompt('请输入文件夹名', '新建文件夹', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.createFolderName.parentId = parentId
        this.createFolderName.name = value
        create(this.createFolderName).then((res) => {
          if (+res.returnCode === 200) {
            this.$message({
              type: 'success',
              message: '创建成功!'
            })
            this.queryParam.id = null
            this.queryList()
          } else {
            this.$message({
              type: 'error',
              message: '创建失败'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '取消创建'
        })
      })
    },
    queryList() {
      this.query(this.queryParam)
      let parentId
      if (this.tableData.length === 0) {
        parentId = this.folder.id
      } else {
        parentId = this.tableData[this.tableData.length - 1].parentId
      }
      this.updateData.fileId = parentId
    },
    async getById(id) {
      const res = await getById(id)
      this.folder = res.data
    },
    async query(data) {
      const res = await query(data)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    toRename(id) {
      this.queryParam.id = null
      this.$prompt('请输入文件夹名', '修改文件名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.updateFolder.id = id
        this.updateFolder.fileName = value
        rename(this.updateFolder).then((res) => {
          if (+res.returnCode === 200) {
            this.$message({
              type: 'success',
              message: res.returnMsg
            })
            this.queryParam.id = null
            this.queryList(this.queryParam)
          } else {
            this.$message({
              type: 'error',
              message: res.returnMsg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '取消修改'
        })
      })
      /*      this.queryParam.id = null
      rename(row).then((res) =>{
        if (+res.returnCode === 200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.query(this.queryParam)
        } else {
          this.$message({
            type: 'error',
            message: '修改失败'
          })
        }
      })*/
    },

    deleteFile(id) {
      this.queryParam.id = null
      deleteFile(id).then((res) => {
        if (+res.returnCode === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.query(this.queryParam)
        } else {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      })
    },
    getChildrenFile(id) {
      this.queryParam.parentId = id
      this.query(this.queryParam)
      this.getById(id)
      this.updateData.fileId = id
    },

    /*    getFileList(id) {
          this.queryParam.id = id
          this.query(this.queryParam)
          this.getById(id)
          this.updateData.fileId = id
        },*/
    openVideo() {
    }
  }
}
</script>

<style ref="stylesheet/scss" lang="scss" scoped>

  .container-table {
    margin-top: 20px;
  }

</style>
